<template>
    <div class="app-container">
        <!-- 搜索表单 -->
        <el-form :inline="true" ref="queryRef" :model="queryParams" class="demo-form-inline" v-show="showSearch">
            <el-form-item label="费用名称" prop="subjectName">
                <el-input v-model="queryParams.subjectName" placeholder="请输入施工类别" clearable 
                    @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="费用类别" prop="accountName">
                <el-select v-model="queryParams.accountName" placeholder="请选择费用类别" @change="handleQuery">
                    <el-option v-for="(item, index) in AccountList" :key="index" :label="item.accountName"
                        :value="item.accountName"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="分配方式" prop="distribution">
                <el-select v-model="queryParams.distribution" placeholder="请选择费用类别" @change="handleQuery">
                    <el-option v-for="(dict, index) in distribution_mode" :key="index" :label="dict.label"
                        :value="dict.value"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="handleQuery">搜索</el-button>
                <el-button icon="Refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>

        <!-- 数据展示表格 -->
        <el-row :gutter="10" class="mb8">
            <!-- 操作行 -->
            <el-col :span="1.5">
                <el-button type="primary" plain icon="Plus" v-hasPermi="['system:SysConstructionType:add']"
                    @click="handleAdd">新增</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="danger" plain icon="Delete" v-hasPermi="['system:SysConstructionType:remove']"
                    :disabled="multiple" @click="handleDelete">删除</el-button>
            </el-col>
            <!-- <el-col :span="1.5">
              <el-button type="warning" plain icon="Download" @click="handleExport">导出</el-button>
          </el-col> -->
            <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>

        </el-row>
        <el-table v-loading="loading" :data="tableData" style="width: 100%" max-height="500"
            @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column prop="subjectName" label="费用名称" align="center" />
            <el-table-column prop="accountName" label="费用类别" align="center" />
            <el-table-column prop="distribution" label="分配方式" align="center">
                <template #default="scope">
                    <dict-tag :options="distribution_mode" :value="scope.row.distribution" />
                </template>
            </el-table-column>
            <el-table-column prop="redgerType" label="台账类型" align="center">
                <template #default="scope">
                    <dict-tag :options="redger_type" :value="scope.row.redgerType" />
                </template>
            </el-table-column>
            <el-table-column label="操作" width="180" align="center" class-name="small-padding fixed-width">
                <template #default="scope">
                    <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"
                        v-hasPermi="['system:list:edit']">修改</el-button>
                    <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)"
                        v-hasPermi="['system:list:remove']">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
            v-model:limit="queryParams.pageSize" @pagination="getList" />

        <!-- 新增修改弹框 -->
        <el-dialog :title="title" v-model="open" width="500px" append-to-body>
            <el-form ref="postRef" :model="formData" :rules="rules" label-width="80px">

                <el-form-item label="费用名称" prop="subjectName">
                    <el-input v-model="formData.subjectName" placeholder="请输入费用名称" class="el-width">
                    </el-input>
                </el-form-item>
                <el-form-item label="费用类别" prop="accountName">
                    <el-select v-model="formData.accountName" placeholder="请选择费用类别" class="el-width" @change="getAccountId">
                        <el-option v-for="(item, index) in AccountList" :key="index" :label="item.accountName"
                            :value="item.accountName"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="分配方式" prop="projectType">
                    <el-select v-model="formData.distribution" placeholder="请选择分配方式" class="el-width">
                        <el-option v-for="(dict, index) in distribution_mode" :key="index" :label="dict.label"
                            :value="dict.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="台账列表" prop="projectType" v-if="formData.distribution == 2">
                    <el-select v-model="formData.redgerType" placeholder="请选择台账" class="el-width">
                        <el-option v-for="(dict, index) in redger_type" :key="dict.value" :label="dict.label"
                            :value="dict.value"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="submitForm">确 定</el-button>
                    <el-button @click="cancel">取 消</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { listSubject, addSubject, getSubject, updateSubject, delSubject,listAccount } from "@/api/cost/subjectList";
// 字典引入
const { proxy } = getCurrentInstance();
const { distribution_mode, redger_type } = proxy.useDict(
    'distribution_mode',
    'redger_type'
);
// 获取路由参数
const route = useRoute()
// 表格数据
const tableData = ref([])
const loading = ref(true);
// 数据总数
const total = ref(0)
const open = ref(false)
const title = ref()
const update = ref(true)
//表单显示隐藏
const showSearch = ref(true);
// 删除的ids
const ids = ref([]);
// 单选
const single = ref(true)
// 多选
const multiple = ref(true);
const queryParams = ref({
    pageNum: 1,
    pageSize: 10,
})
const AccountList=ref()
const formData = ref({})
// 新增表单规则
const rules = ref({
    subjectName: [{ required: true, message: "名称不能为空", trigger: "blur" }],
    accountName: [{ required: true, message: "分类不能为空", trigger: "blur" }],
})
// 表单重置
const reset = () => {
    formData.value = {};
    proxy.resetForm("postRef");
}
//获取列表数据
const getList = () => {
    loading.value = true;
    listSubject(queryParams.value).then(res => {
        tableData.value = res.rows
        total.value = res.total;
        loading.value = false;
    }).catch(error => {
        console.log(error);
    })
}

// 获取新增分类下拉数据
const getAccountList = () => {
    listAccount({pageSize: 1000}).then((res) => {
        AccountList.value = res.data;
  });
};

/** 新增按钮操作 */
function handleAdd() {
    reset()
    open.value = true
    title.value = "新增"
    update.value = false
}
/** 编辑按钮操作 */
function handleUpdate(row) {
    reset()
    getSubject(row.id).then(response => {
        formData.value = response.data;
        open.value = true;
        title.value = "修改";
        update.value = true
    });

}
const getAccountId=(Name)=>{
    const list = AccountList.value.find(item => item.accountName == Name)
  formData.value.accountId = list.id
}
// 提交
const submitForm = () => {
    for (var i = 0; i < AccountList.value.length; i++) {
    if (AccountList.value[i].id == formData.value.accountId) {
      formData.value.accountName = AccountList.value[i].accountName
    }
  }
    proxy.$refs["postRef"].validate(valid => {
        if (valid) {
            if (update.value) {
                updateSubject(formData.value).then(response => {
                    proxy.$modal.msgSuccess("修改成功");
                    open.value = false;
                    getList();
                });
            } else {
                addSubject(formData.value).then(response => {
                    proxy.$modal.msgSuccess("新增成功");
                    open.value = false;
                    getList();
                });
            }
        }
    });
}
// 取消
const cancel = () => {
    open.value = false
    reset();
}
/** 删除按钮操作 */
function handleDelete(row) {
    const delId = row.id || ids.value;
    proxy.$modal.confirm('是否确认删除?').then(function () {
        return delSubject(delId);
    }).then(() => {
        getList();
        proxy.$modal.msgSuccess("删除成功");
    }).catch(() => { });
}
/**导出按钮操作 */
function handleExport() {
    proxy.download("/system/SysConstructionType/export", {
        ...queryParams.value
    }, `施工类别列表.xlsx`);
}

//查询列表
const handleQuery = () => {
    queryParams.value.pageNum = 1;
    getList();
}
/** 重置按钮操作 */
function resetQuery() {
    proxy.resetForm("queryRef");
    handleQuery();
}
/** 多选框选中数据 */
function handleSelectionChange(selection) {
    ids.value = selection.map(item => item.id);
    single.value = selection.length != 1;
    multiple.value = !selection.length;
}
getList();
getAccountList()
</script>

<style lang="scss" scoped>
.el-row {
    margin-bottom: 20px;
}

.search-form {
    padding-left: 20px;
}

</style>